<template>
  <div class="app-container">
    <div class="filterDiv">
      <label class="label">模板类型</label>
      <el-select ref="catogeryRef" v-model="listQuery.queryParam.jeTempletTypeId" size="small" placeholder="模板类型">
        <el-option label="全部" value />
        <el-option v-for="item in templetTypeList" :key="item.id" :label="item.templetTypeName" :value="item.id" />
      </el-select>
      <label class="label">模板名称</label>
      <el-input v-model="listQuery.queryParam.jeTempletName" size="small" type="text" style="width:140px;" />
      <el-button size="small" type="primary" round @click="pageIndex = 1; getData()">查询</el-button>
      <el-button v-permiss="['60302020']" size="small" class="filter-item" round style="float:right;margin-top:5px" type="primary" @click="handleAdd">新增</el-button>
      <el-button v-permiss="['60302070']" size="small" class="filter-item" round style="margin-left: 10px;float:right;margin-top:5px" type="primary" @click="handleSync">同步</el-button>
    </div>
    <div class="contentDiv">
      <el-table :key="tableKey" :data="tableData" size="small" fit highlight-current-row style="width: 100%;">
        <el-empty slot="empty" :image-size="120" description="暂无数据" />
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="模板代码" align="center">
          <template slot-scope="{row}">
            <span>{{ row.jeTempletCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="模板名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.jeTempletName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="系统模板" align="center">
          <template slot-scope="{row}">
            <span>{{ row.isSystem == 1 ? '是' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="模板类型" align="center">
          <template slot-scope="{row}">
            <span>{{ row.jeTempletTypeName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建/修改时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.updateDate | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="{row}">
            <el-button v-if="row.isSystem!=1" v-permiss="['60302030']" type="text" size="small" @click="toModify(row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="toDetail(row.id)">查看</el-button>
            <el-button v-permiss="['60302060']" type="text" size="small" @click="delTemplet(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>10" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageNum" @pagination="getData" />
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getTempletList, synVoucherData, delTempletHeader } from '@/api/voucher'
export default {
  name: 'VoucherTemplate',
  data() {
    return {
      listQuery: {
        pageIndex: 1,
        pageNum: 10,
        queryParam: {
          jeTempletName: '',
          jeTempletTypeId: ''
        }
      },
      tableKey: 0,
      tableData: [],
      total: 0
    }
  },
  computed: {
    ...mapGetters(['templetTypeList'])
  },
  created() {
    this.$store.dispatch('voucher/getTempletType')
    this.getData()
  },
  methods: {
    delTemplet(id) {
      this.$confirm(
        '如果是系统模板，在删除后可以“基础数据同步=>执行同步”来恢复系统模板。确定要删除这个模板吗?',
        '提示',
        {
          confirmButtonText: '确定',
          closeOnClickModal: false,
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        delTempletHeader(id).then((res) => {
          if (res.data.errorCode == 0) {
            this.getData()
            this.$message.success(res.data.msg)
          }
        })
      })
    },
    handleSync() {
      this.$confirm('确定要同步数据吗?', '提示', {
        confirmButtonText: '确定',
        closeOnClickModal: false,
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = {
          bookId: sessionStorage.bookId,
          coaHierarchyId: sessionStorage.coaHierarchyId
        }
        synVoucherData(data).then((res) => {
          if (res.data.errorCode === '0') {
            this.$message.success(res.data.msg)
          }
        })
      })
    },
    getData() {
      getTempletList(this.listQuery).then((res) => {
        this.tableData = res.data.data || []
        this.total = res.data.totalNum
      })
    },
    handleAdd() {
      this.$router.push('/voucher/add?jtype=0')
    },
    toModify(id) {
      this.$router.push('/voucher/modify?tid=' + id + '&jtype=0')
    },
    toDetail(id) {
      this.$router.push('/voucher/detail?tid=' + id)
    }
  }
}
</script>
</div>
